<template>
  <div id="map"></div>
  <div class="tool">
    <button @click="addWI">添加窗体</button>
  </div>
</template>

<script setup>
import {onBeforeUnmount, onMounted} from 'vue'
import {GInfoWindow} from "@/utils/gaode";
import {createMap, gMap, gMapGui} from "@/gaode";
import InfoWindow from "@/components/InfoWindow.vue";


onMounted(async () => {
  createMap('map', {
    viewMode: '3D',
    layers: []
  });
})

function addWI() {

  let gInfoWindow = new GInfoWindow(InfoWindow);
  gInfoWindow.createApp()
  gInfoWindow.infoWindow.open(gMap.map, gMap.map.getCenter())
}

onBeforeUnmount(() => {
  gMapGui && gMapGui.remove();
})

</script>

<style scoped>
#map {

}

.tool {
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: aquamarine;
  padding: 5px;
}
</style>
